<template>
  <a-layout>
    <a-layout-sider width="200" style="background: #fff">
      <a-menu
          v-model:selectedKeys="selectedKeys2"
          v-model:openKeys="openKeys"
          mode="inline"
          :style="{ height: '100%', borderRight: 0 }"
      >
        <a-sub-menu key="sub1">
          <template #title>
              <span>
                <user-outlined/>
                subnav 1
              </span>
          </template>
          <a-menu-item key="1">option1</a-menu-item>
          <a-menu-item key="2">option2</a-menu-item>
          <a-menu-item key="3">option3</a-menu-item>
          <a-menu-item key="4">option4</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub2">
          <template #title>
              <span>
                <laptop-outlined/>
                subnav 2
              </span>
          </template>
          <a-menu-item key="5">option5</a-menu-item>
          <a-menu-item key="6">option6</a-menu-item>
          <a-menu-item key="7">option7</a-menu-item>
          <a-menu-item key="8">option8</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub3">
          <template #title>
              <span>
                <notification-outlined/>
                subnav 3
              </span>
          </template>
          <a-menu-item key="9">option9</a-menu-item>
          <a-menu-item key="10">option10</a-menu-item>
          <a-menu-item key="11">option11</a-menu-item>
          <a-menu-item key="12">option12</a-menu-item>
        </a-sub-menu>
      </a-menu>
    </a-layout-sider>
    <a-layout style="padding: 0 24px 24px">
      <a-breadcrumb style="margin: 16px 0"></a-breadcrumb>
      <a-layout-content :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }">
        <a-list item-layout="vertical" size="large" :grid="{gutter: 20, column: 3}" :pagination="pagination" :data-source="ebooks">

          <template #renderItem="{ item }">
            <a-list-item key="item.name">
              <template #actions>
          <span v-for="{ icon, text } in actions" :key="icon">
            <component :is="icon" style="margin-right: 8px" />
            {{ text }}
          </span>
              </template>

              <a-list-item-meta :description="item.description">
                <template #title>
                  <a :href="item.href">{{ item.name }}</a>
                </template>
                <template #avatar>
                  <a-avatar :src="item.cover" />
                </template>
              </a-list-item-meta>
            </a-list-item>
          </template>
        </a-list>

      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script lang="ts" setup>
import {onMounted, ref} from 'vue';
import axios from "axios";

import {LaptopOutlined, NotificationOutlined, UserOutlined, StarOutlined, LikeOutlined, MessageOutlined} from "@ant-design/icons-vue"; // @ is an alias to /src


const pagination = {
  onChange: (page: number) => {
    console.log(page);
  },
  pageSize: 10,
};
// 优化源码部分
interface Action {
  icon: typeof StarOutlined | typeof LikeOutlined | typeof MessageOutlined;
  text: string;
}

const actions: Action[] = [
  {icon: StarOutlined, text: '156'},
  {icon: LikeOutlined, text: '156'},
  {icon: MessageOutlined, text: '2'},
];



const selectedKeys2 = ref<string[]>(['1']);
const openKeys = ref<string[]>(['sub1']);
//测试前后端交互
// axios.get("http://localhost:8080/ebook").then((resp)=>{
//   console.log(resp);
//   console.log(resp.data);
//   console.log(resp.data.data);
// })

// 定义电子书列表
const ebooks = ref([])
// onMounted(async ()=>{
//   // 获取环境变量信息
//   const URL=process.env["VUE_APP_API_URL"]
//   await axios.get("http://localhost:8080/ebook").then((resp)=>{
//     ebooks.value = resp.data.data// 将数据赋值给ebooks
//   })
// })

// 修改axios请求地址
onMounted(async ()=>{
  // const URL=process.env["VUE_APP_API_URL"]// 获取环境变量信息
  // await axios.get("/ebook/Alllist").then((resp)=>{
  //   ebooks.value = resp.data.data// 将数据赋值给ebooks
  // })
  await  axios.get('/ebook/Alllist',{
    params: {
      page: 1,
      size: 30 //设置较大值，一次性获取所有数据
    }
  }).then(res => {
    ebooks.value = res.data.data.list;
  })
})

</script>
<style scoped>
.ant-avatar {
  width: 50px;
  height: 50px;
  line-height: 50px;
  border-radius: 8%;
  margin: 5px 0;
}
</style>